<template>
  <div class="cart">
    <div class="header">购物车</div>
    <div class="goods-list">
      <div class="goods-list-item" v-for="(item,index) in goods" :key="item.id">
        <input class="check" type="checkbox" name="" id="" />
        <div class="img"><img :src="item.img" alt="" /></div>
        <div class="info">
          <div class="title">{{ item.title }}</div>

          <div class="desc">{{ item.desc }}</div>

          <div class="price">单价:{{ item.price }}</div>
        </div>
        <div class="num">
          <span class="add" @click="reduce(index)">-</span>
          <input type="text" v-model="item.num" />
          <span class="reduce" @click="add(index)">+</span>
        </div>
        <div class="del" @click="del(index)">删除</div>
      </div>
    </div>
    <div class="total-price">合计:￥{{ getTotal }}</div>

    <collect></collect>
  </div>
</template>

<script>
import collect from "../components/CollectGood.vue";
export default {
  name: "cart",
  data() {
    return {
      totalPrice: 0,
      goods: [
        {
          id: "0",
          title: "螺蛳粉",
          img: "https://img2.baidu.com/it/u=2587361840,1464385345&fm=253&fmt=auto&app=138&f=JPEG?w=440&h=408",
          price: 22,
          desc: "好吃的螺蛳粉",
          num: 1,
        },
        {
          id: "1",
          title: "烤羊肉",
          img: "https://img0.baidu.com/it/u=1510357846,1090925715&fm=253&fmt=auto&app=138&f=JPEG?w=488&h=398",
          price: 1500,
          desc: "沸羊羊你吃饭怎么可以这么粗鲁",
          num: 1,
        },
      ],
    };
  },
  methods: {
     add(a){
            console.log(a);
            this.goods[a].num++
            // console.log(  this.goods[a].num);

        },
        reduce(a){
              console.log(a);
              this.goods[a].num--
              if(this.goods[a].num ==0){
                let shang = confirm('删除改商品吗')
              if(shang){
                  this.goods.splice(a,1)
              }else{
                  this.goods[a].num =1
              }
              }

        },
        del(a){
            console.log(a);
            this.goods.splice(a,1)
        }
    
  },
  filters: {},
  computed: {
      getTotal(){
            console.log(this.goods);
            let aa =0
         for(let i = 0;i<this.goods.length;i++){
             console.log(this.goods[i]);
             this.totalPrice = this.goods[i].num * this.goods[i].price
             aa += this.totalPrice
         }
             console.log(aa);
             return aa
        }

   
  },
  watch: {},
  components: {
    collect,
  },
};
</script>
<style lang="less">
.cart {
  width: 100%;
  margin: 0 auto;
  .header {
    width: 100%;
    height: 50px;
    background: #f3f3f3;
    color: red;
     text-align: center;
    line-height: 50px;
     font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
  }
  .total-price {
    width: 100%;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #f3f3f3;
    color: red;
    text-align: center;
    line-height: 50px;
    font-size: 24px;
    font-weight: 800;
  }

  .goods-list {
    .goods-list-item {
      width: 100%;
      height: 110px;
      position: relative;
      .check {
        float: right;
      }
      .del {
        width: 29px;
        height: 50px;
        font-size: 12px;
        color: #333;
        float: right;
        margin: 0 0 0 0;
      }
      .img {
        width: 100px;
        height: 100px;
        float: left;

        img {
          width: 100%;
          height: 100%;
        }
      }
      .info {
        float: left;
        margin-left: 10px;
        .title {
          font-size: 18px;
          font-weight: 800;
          width: 200px;
          margin-top: 10px;
        }

        .desc {
          font-size: 12px;
          margin-top: 10px;
          color: #666;
        }
        .price {
          font-size: 12px;
          margin-top: 10px;
          color: #666;
        }
      }
      .num {
        position: absolute;
        right: 0px;
        bottom: 20px;
        input[type="text"] {
          width: 10px;
          padding-left: 5px;
        }
        span {
          width: 20px;
          height: 20px;
          display: inline-block;
          line-height: 20px;
          text-align: center;
        }
      }
    }
  }
}
</style>
